<template>
    <div>
<Top><p>登录</p></Top>
        <div class="one">
        <van-cell-group>
            <van-field v-model="name" placeholder="账号" />
            <van-field v-model="passwd" :type="checked" center clearable placeholder="密码">
                <template #right-icon>
                    <van-switch v-model="checked" active-value="text" inactive-value="password" active-color="#07c160" size="24" />
                </template>
            </van-field>
            <van-field v-model="code" center clearable placeholder="验证码">
                <template #right-icon>
                    <div class="input-img">
                    <img :src="src" alt="">
                    <div class="right-p1" @click="code1"><p>看不清</p><p class="right-p2">换一张</p></div>
                    </div>
                </template>
            </van-field>
        </van-cell-group>
        </div>
        <p class="p-red">温馨提示：未注册过的账号，登录时将自动注册</p>

           <p class="p-red"> 注册过的用户可凭账号密码登录</p>
        <div class="loin">
        <van-button type="primary" block @click="loin">登录</van-button></div>
        <div class="top" v-if="tan">
            <van-icon name="warning-o" size="70" color="#f8cb86"/>
            <p>{{msg}}</p>
            <van-button type="primary" block @click="ok()">确认</van-button>
        </div>
    </div>
</template>

<script>
    import Top from "../components/Top";
    import qs from "../../node_modules/querystring"
    export default {
        name: "Loin",
        components: {Top},
        data:()=>{
            return{
                name:"",
                passwd:"",
                code:"",
                checked:"password",
                src:"",
                msg:"",
                tan:false,
            }
        },
        created() {
            this.code1()
        },
        methods: {
            code1() {
                this.axios.post("https://elm.cangdu.org/v1/captchas").then((data) => {
                    this.src=data.data.code;
                }).catch(error=>{
                    console.log(error);
                });
            },
            ok(){
                this.tan=false;
            },
            loin(){

                this.axios.post("https://elm.cangdu.org/v2/login",qs.stringify({username:this.name,password:this.passwd,captcha_code:this.code})).then((data) => {
               let dt=data.data;
               console.log(dt);
                  if(dt.status==0&&dt.message=="用户名参数错误"){
                      this.tan=true;
this.msg='请输入手机号/邮箱/用户名';
console.log(this.msg);
                  }else if (dt.status==0&&dt.message=="密码参数错误"){
                      this.msg='请输入密码';
                      this.tan=true;
                  }else if (dt.status==0&&this.code.length==0){
                      this.msg='请输入验证码';
                      this.tan=true;
                      console.log(this.code.length)
                  }else if (dt.status==0&&dt.message=='验证码不正确'){
                      this.msg='验证码错误';
                      this.tan=true;
                      this.code1();
                  }else if (dt.username==this.name) {
                      this.$store.commit("AddUser",data.data)
                      this.$router.push("/my");
                      localStorage.user=JSON.stringify(data.data);
                  };


                }).catch(error=>{
                    console.log(error);
                });
            }
        },
    }
</script>

<style scoped>
    .one{
        margin-top: 10px;
    }
    .input-img{
        /*background-color: #ffd930;*/
        display: flex;
        font-size: 6px;
    }
    .right-p2{
        color: #3190e8;
    }
    .p-red{
        font-size: .5rem;
        color: red;
        padding: .4rem .6rem;
        line-height: .5rem;
        margin-top: 10px;
    }
    .loin{
        padding: 10px;
    }
    .top{
        position: absolute;
        top: 30%;

        width: 18rem;
        left: 0;
        right: 0;
        margin: auto;
        animation: tipMove .4s;
        background-color: #fff;
        padding-top: .6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px;
        border-radius: .25rem;
    }
    .top p{
        font-size: 1rem;
        color: #333;
        line-height: .9rem;
        text-align: center;
        margin-top: .8rem;
        padding: 0 .4rem;
    }
    .top button{
        font-size: 1rem;
        color: #fff;
        font-weight: 700;
        margin-top: .8rem;
        background-color: #4cd964;
        width: 100%;
        text-align: center;
        line-height: 1.8rem;
        border: 1px;
        height: 40px;
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem;
    }
</style>